<template>
  <div>
    <h1>选择喜欢的狗</h1>
   <div class="choose">
     <FavouriteDog v-for='(item,index) in list' :key='index' :dogImgUrl='item.dogImgUrl' :dogName='item.dogName' @clickName='addName'/>
    
    <div class="txt">
    <h4>您喜欢的狗如下</h4>
    <p v-for='(item,index) in newlist' :key='index'>{{item}}</p>
     
    </div>

   </div>
  </div>
</template>

<script>
import FavouriteDog from './components/FavouriteDog.vue'
export default {
   data(){
    return{
      list:[
    {
        dogImgUrl: "https://pics5.baidu.com/feed/9f2f070828381f3016e5bed1ac405c0e6f06f095.jpeg?token=1fc52517bac5829772f244e11d00b9eb&s=D22A9645C0433B4D62965C230300E049",
        dogName: "博美",
    },
    {
        dogImgUrl:"https://pics5.baidu.com/feed/9f2f070828381f3016e5bed1ac405c0e6f06f095.jpeg?token=1fc52517bac5829772f244e11d00b9eb&s=D22A9645C0433B4D62965C230300E049",
        dogName: "泰迪",
    },
    {
        dogImgUrl:"https://pics5.baidu.com/feed/9f2f070828381f3016e5bed1ac405c0e6f06f095.jpeg?token=1fc52517bac5829772f244e11d00b9eb&s=D22A9645C0433B4D62965C230300E049",
        dogName: "金毛",
    },
    {
        dogImgUrl:"https://pics5.baidu.com/feed/9f2f070828381f3016e5bed1ac405c0e6f06f095.jpeg?token=1fc52517bac5829772f244e11d00b9eb&s=D22A9645C0433B4D62965C230300E049",
        dogName: "哈士奇",
    },
    {
        dogImgUrl:"https://pics5.baidu.com/feed/9f2f070828381f3016e5bed1ac405c0e6f06f095.jpeg?token=1fc52517bac5829772f244e11d00b9eb&s=D22A9645C0433B4D62965C230300E049",
        dogName: "阿拉斯加",
    },
    {
        dogImgUrl:"https://pics5.baidu.com/feed/9f2f070828381f3016e5bed1ac405c0e6f06f095.jpeg?token=1fc52517bac5829772f244e11d00b9eb&s=D22A9645C0433B4D62965C230300E049",
        dogName: "萨摩耶",
    },
],

newlist:[]

    }
  },
  components:{
    FavouriteDog
  },
  methods:{
    addName(list){
     this.newlist.push(list)

    }
  }

}
</script>

<style>

 
</style>